<script setup>
import {ref} from "vue";
import {User,Lock} from "@element-plus/icons-vue";
const userlogin=ref({
  username:'',
  password:'',
})

const userRegister=ref({
  username:'',
  password:'',
  repassword:'',
})

const isLogin=ref(true);

//校准密码
const checkRePassword=(rule,value,callback)=>{
  if (value === '') {
    callback(new Error('请再次确认密码'))
  } else if (value !== userRegister.value.password) {
    callback(new Error('请确保两次输入的密码一样'))
  } else {
    callback()
  }
}
const rule1=({
  username:[{required:true,message:'请输入用户名',trigger:'blur'}],
  password:[{required:true,message:'请输入密码',trigger:'blur'}],
})

const rules2=({
  username:[{required:true,message:'请输入用户名',trigger:'blur'}],
  password:[{required:true,message:'请输入密码',trigger:'blur'}],
  repassword:[{validator: checkRePassword, trigger: 'blur'}]
})
import {userLoginService,userRegisterService} from '@/api/user.js'
import {ElMessage} from "element-plus";//更好看的警示框
import {useTokenStore} from '@/sts/token.js'//用于存放token
import {useRouter} from 'vue-router'//跳转路由
import useUserInfoStore from "@/sts/userinfo";

const router = useRouter()
const tokenStore=useTokenStore();
const userinfo=useUserInfoStore();
const Login = async () => {

  if(userlogin.value.username===''||userlogin.value.password==='')
    ElMessage.error("用户名或者密码为空")
  else{
    const result=await userLoginService(userlogin.value);
    ElMessage.success('登录成功')
    //把得到的token存储到pinia中
    tokenStore.setToken(result.data)
    userinfo.setInfo(userlogin.value.username);
    //console.log(userinfo.info);
    await router.push('/main')
  }
}
//注册
const Register= async ()=>{
  if(userRegister.value.username===''||userRegister.value.password==='')
    ElMessage.error("用户名或者密码为空");
  else if(userRegister.value.password!==userRegister.value.repassword)
    ElMessage.error("确认密码与密码不符");
  else {
    await userRegisterService(userRegister.value);
    ElMessage.success("注册成功");
  }
}

</script>

<template>
  <!--  登录表单-->
  <el-form class="login" :model="userlogin"  size="large" v-if="isLogin" :rules="rule1">
    <el-form-item class="title">
      <h1>登录</h1>
    </el-form-item>
    <el-form-item prop="username">
      <el-input :prefix-icon="User" class="user" v-model="userlogin.username"  placeholder="请输入用户名" />
    </el-form-item>
    <el-form-item prop="password">
      <el-input
          v-model="userlogin.password"
          :prefix-icon="Lock"
          type="password"
          placeholder="请输入密码"
          show-password
          class="password"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="login-button" @click="Login">登录</el-button>
      <el-button type="danger" class="skip-button" @click="isLogin=false">注册</el-button>
    </el-form-item>
  </el-form>
  <!--  注册列表-->
  <el-form v-else class="register" :model="userRegister"  size="large" :rules="rules2">
    <el-form-item class="title">
      <h1>注册</h1>
    </el-form-item>
    <el-form-item prop="username">
      <el-input :prefix-icon="User" class="user" v-model="userRegister.username"  placeholder="请输入用户名" />
    </el-form-item>
    <el-form-item prop="password">
      <el-input
          v-model="userRegister.password"
          :prefix-icon="Lock"
          type="password"
          placeholder="请输入密码"
          show-password
          class="password"
      />
    </el-form-item>
    <el-form-item prop="repassword">
      <el-input
          v-model="userRegister.repassword"
          :prefix-icon="Lock"
          type="password"
          placeholder="请再次输入密码"
          show-password
          class="password"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="back-button" @click="isLogin=true">返回</el-button>
      <el-button type="danger" class="register-button" @click="Register">注册</el-button>
    </el-form-item>
  </el-form>

</template>

<style scoped>
.login{
  position: absolute;
  top: 40%;
  left: 53%;
  transform: translate(-50%, -50%);
}
.user{
  width: 450px;
}
.password{
  margin-top: 40px;
  width: 450px;
}
.login-button,.skip-button{
  margin-top: 30px;
  width: 230px;
}
.back-button,.register-button{
  width: 230px;
}
.register{
  position: absolute;
  top: 40%;
  left: 53%;
  transform: translate(-50%, -50%);
}
</style>